<template>
  <div>
    <div class="flex-center mb16">
      <div>
        <Title title="项目数据" />
      </div>
      <el-tooltip placement="top">
        <div slot="content">
          <div>统计值公式说明</div>
          <div>1、总含税金额=项目单和渠道单含税金额之和</div>
          <div>2、总成本=项目单和渠道单成本之和</div>
          <div>3、项目毛利=项目净收入-（总成本+附加税费-可抵扣增值税）【项目净收入=总含税金额/1.06】</div>
          <div>4、项目毛利率=项目毛利/项目净收入</div>
          <div>5、附加税费=（含税总金额/1.06 * 0.06 - 可抵扣增值税）* 0.12</div>
          <div>6、可抵扣增值税 = SUM（成本项金额/（1+可抵扣税率）* 可抵扣税率）</div>
        </div>
        <tipIcon is-diy class="ml5" />
      </el-tooltip>
    </div>
    <dataDisplay
      :data-list="displayData"
      class="mobile-data"
      style="margin-bottom:16px;"
    />
  </div>
</template>

<script>
import Title from '@/components/Title';
import dataDisplay from '@/components/Common/baseComponent/dataDisplay';
// img
import taxAmountIcon from '@/assets/dataDisplay/icon_28.png';
import totalCostIcon from '@/assets/project/totalCost.png';
import projectProfitIcon from '@/assets/dataDisplay/rmb.png';
import projectProfitRateIcon from '@/assets/chargeOffDetail/maori.png';
import additionalTaxIcon from '@/assets/project/additionalTax.png';
import addedTaxIcon from '@/assets/dataDisplay/icon_38.png';

export default {
  components: { Title, dataDisplay },
  props: {
    detailData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  computed: {
    displayData() {
      if (!this.detailData || !this.detailData.projectData) {
        return [];
      }
      return [
        { data: this.detailData.projectData.taxAmount / 100, label: '总含税金额', icon: taxAmountIcon },
        { data: this.detailData.projectData.totalCost / 100, isWarning: this.isWarning, label: '总成本', icon: totalCostIcon },
        { data: this.detailData.projectData.projectProfit / 100, label: '项目毛利', icon: projectProfitIcon },
        { data: this.detailData.projectData.projectProfitRate, unit: '%', label: '项目毛利率', icon: projectProfitRateIcon },
        { data: this.detailData.projectData.additionalTax / 100, label: '附加税费', icon: additionalTaxIcon },
        { data: this.detailData.projectData.addedTax / 100, label: '可抵扣增值税', icon: addedTaxIcon }
      ];
    },
    isWarning() {
      return this.detailData.projectData && this.detailData.projectData.totalCost > this.detailData.projectData.taxAmount;
    }
  }
};
</script>

<style scoped lang="scss">
.mb16 {
  margin-bottom: 16px;
}
</style>
